<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vercel 部署指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.7;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .highlight-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .highlight-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        .step-number {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f8f9fa;
            border-radius: 6px;
            padding: 20px;
            overflow-x: auto;
        }
        .section-divider {
            border-top: 1px solid #eee;
            margin: 60px 0;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.8;
            margin-right: 10px;
            color: #6e8efb;
            font-weight: bold;
        }
        .footer-link {
            transition: all 0.3s ease;
        }
        .footer-link:hover {
            color: #a777e3 !important;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 md:py-32">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="flex flex-col items-center text-center">
                <span class="bg-white text-purple-600 px-4 py-1 rounded-full text-sm font-medium mb-4">技术指南</span>
                <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">轻松部署前端项目到Vercel</h1>
                <p class="text-xl opacity-90 max-w-2xl mb-8">本指南将带您一步步完成从GitHub到Vercel的完整部署流程，让您的项目快速上线</p>
                <div class="flex space-x-4">
                    <a href="#steps" class="bg-white text-purple-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition">开始学习</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto px-6 py-12 max-w-5xl">
        <!-- Introduction -->
        <section class="mb-16">
            <p class="drop-cap text-gray-700 mb-6">在当今快速发展的前端开发领域，能够快速部署和分享您的项目至关重要。Vercel作为一款专为前端开发者打造的云平台，提供了无缝的部署体验和出色的性能。</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <div class="text-purple-600 text-2xl mb-4">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">闪电般快速</h3>
                    <p class="text-gray-600">Vercel的边缘网络确保您的应用在全球范围内都能快速加载。</p>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <div class="text-purple-600 text-2xl mb-4">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">自动部署</h3>
                    <p class="text-gray-600">每次GitHub推送都会触发自动构建和部署，保持项目最新。</p>
                </div>
            </div>
        </section>

        <!-- Steps Section -->
        <section id="steps" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800">部署步骤详解</h2>
            
            <!-- Step 1 -->
            <div class="flex flex-col md:flex-row gap-6 mb-12">
                <div class="flex-shrink-0">
                    <div class="step-number">1</div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">创建GitHub仓库</h3>
                    <p class="text-gray-600 mb-4">首先，我们需要在GitHub上创建一个新的仓库来存放我们的前端项目代码。</p>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600 mb-6">
                        <li>登录GitHub账户</li>
                        <li>点击"+"图标选择"New repository"</li>
                        <li>填写仓库名称(如"my-vercel-demo")</li>
                        <li>选择"Public"公开</li>
                        <li>勾选"Initialize with README"</li>
                    </ul>
                    <div class="code-block mb-4">
                        <span class="text-gray-500"># 可选：本地克隆仓库</span><br>
                        git clone https://github.com/your-username/my-vercel-demo.git
                    </div>
                </div>
            </div>

            <!-- Step 2 -->
            <div class="flex flex-col md:flex-row gap-6 mb-12">
                <div class="flex-shrink-0">
                    <div class="step-number">2</div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">创建前端项目文件</h3>
                    <p class="text-gray-600 mb-4">在仓库中添加一个基本的HTML文件作为我们的项目入口。</p>
                    <div class="code-block mb-6">
                        <pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="zh-CN"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;我的Vercel演示&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            padding: 30px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;h1&gt;我的Vercel部署演示&lt;/h1&gt;
        &lt;p&gt;这是一个通过GitHub部署到Vercel的简单演示项目&lt;/p&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
                    </div>
                    <p class="text-gray-600">提交文件后，您的GitHub仓库现在包含了一个基本的前端项目。</p>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="flex flex-col md:flex-row gap-6 mb-12">
                <div class="flex-shrink-0">
                    <div class="step-number">3</div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">连接Vercel与GitHub</h3>
                    <p class="text-gray-600 mb-4">将您的GitHub账户与Vercel关联，以便访问您的仓库。</p>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600 mb-6">
                        <li>访问<a href="https://vercel.com" class="text-purple-600 hover:underline">Vercel官网</a></li>
                        <li>点击"Sign Up"并使用GitHub登录</li>
                        <li>授权Vercel访问您的GitHub账户</li>
                    </ul>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
                        <p class="text-blue-700"><i class="fas fa-info-circle mr-2"></i>Vercel只需要最基本的GitHub权限，不会对您的代码库进行任何修改。</p>
                    </div>
                </div>
            </div>

            <!-- Step 4 -->
            <div class="flex flex-col md:flex-row gap-6 mb-12">
                <div class="flex-shrink-0">
                    <div class="step-number">4</div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">导入GitHub项目</h3>
                    <p class="text-gray-600 mb-4">将您的GitHub仓库导入到Vercel开始部署流程。</p>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                        <div class="bg-white p-4 rounded-lg border border-gray-200">
                            <div class="flex items-center mb-3">
                                <div class="bg-purple-100 text-purple-600 rounded-full p-2 mr-3">
                                    <i class="fas fa-plus"></i>
                                </div>
                                <h4 class="font-medium">1. 创建新项目</h4>
                            </div>
                            <p class="text-sm text-gray-600">在Vercel仪表板点击"Add New..."选择"Project"</p>
                        </div>
                        <div class="bg-white p-4 rounded-lg border border-gray-200">
                            <div class="flex items-center mb-3">
                                <div class="bg-purple-100 text-purple-600 rounded-full p-2 mr-3">
                                    <i class="fab fa-github"></i>
                                </div>
                                <h4 class="font-medium">2. 选择仓库</h4>
                            </div>
                            <p class="text-sm text-gray-600">找到您的仓库(如"my-vercel-demo")并点击"Import"</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Step 5 -->
            <div class="flex flex-col md:flex-row gap-6 mb-12">
                <div class="flex-shrink-0">
                    <div class="step-number">5</div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">配置项目部署</h3>
                    <p class="text-gray-600 mb-4">配置您的项目设置并开始部署。</p>
                    <div class="mb-6">
                        <div class="flex items-start mb-4">
                            <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3">
                                <i class="fas fa-check"></i>
                            </div>
                            <div>
                                <h4 class="font-medium mb-1">项目名称</h4>
                                <p class="text-sm text-gray-600">可以保持默认或自定义一个有意义的名称</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-green-100 text-green-600 rounded-full p-2 mr-3">
                                <i class="fas fa-check"></i>
                            </div>
                            <div>
                                <h4 class="font-medium mb-1">框架预设</h4>
                                <p class="text-sm text-gray-600">对于简单HTML项目，选择"Other"或保持默认</p>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-600">点击"Deploy"按钮，Vercel将自动开始部署过程。</p>
                </div>
            </div>

            <!-- Step 6 -->
            <div class="flex flex-col md:flex-row gap-6 mb-12">
                <div class="flex-shrink-0">
                    <div class="step-number">6</div>
                </div>
                <div>
                    <h3 class="text-2xl font-bold mb-4 text-gray-800">访问部署的网站</h3>
                    <p class="text-gray-600 mb-4">部署成功后，您将获得一个可公开访问的URL。</p>
                    <div class="bg-white p-4 rounded-lg border border-gray-200 mb-6">
                        <div class="flex items-center">
                            <div class="bg-purple-100 text-purple-600 rounded-full p-2 mr-3">
                                <i class="fas fa-globe"></i>
                            </div>
                            <div>
                                <h4 class="font-medium">您的网站URL</h4>
                                <p class="text-sm text-purple-600">https://your-project-name.vercel.app</p>
                            </div>
                        </div>
                    </div>
                    <p class="text-gray-600">在项目仪表板中，您可以查看部署历史、访问日志和其他设置。</p>
                </div>
            </div>
        </section>

        <!-- Workflow Diagram -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800">工作流程图示</h2>
            <div class="bg-white p-8 rounded-xl">
                <div class="mermaid">
                    graph TD
                        A[GitHub仓库] -->|推送代码| B(Vercel检测变更)
                        B --> C[自动构建]
                        C --> D[部署到CDN]
                        D --> E[全球访问]
                </div>
            </div>
        </section>

        <!-- Advanced Features -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-gray-800">高级功能</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 text-gray-800">自定义域名</h3>
                    <p class="text-gray-600 mb-4">您可以将自己的域名绑定到Vercel项目，打造专业品牌形象。</p>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                        <li>在项目设置中选择"Domains"</li>
                        <li>输入您拥有的域名</li>
                        <li>按照提示配置DNS记录</li>
                    </ul>
                </div>
                <div class="highlight-card bg-white p-8 rounded-xl">
                    <h3 class="text-xl font-bold mb-4 text-gray-800">环境变量</h3>
                    <p class="text-gray-600 mb-4">安全地管理敏感信息和配置参数。</p>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                        <li>在项目设置中选择"Environment Variables"</li>
                        <li>添加键值对环境变量</li>
                        <li>选择应用环境(生产/预览/开发)</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Troubleshooting -->
        <section>
            <h2 class="text-3xl font-bold mb-8 text-gray-800">故障排除</h2>
            <div class="bg-white p-8 rounded-xl">
                <div class="space-y-6">
                    <div>
                        <h4 class="font-bold text-lg mb-2 text-gray-800">部署失败</h4>
                        <p class="text-gray-600">检查构建日志以了解详细错误信息，常见问题包括语法错误或缺少依赖。</p>
                    </div>
                    <div>
                        <h4 class="font-bold text-lg mb-2 text-gray-800">页面未更新</h4>
                        <p class="text-gray-600">尝试清除浏览器缓存或使用隐私窗口访问，确保查看的是最新版本。</p>
                    </div>
                    <div>
                        <h4 class="font-bold text-lg mb-2 text-gray-800">资源加载问题</h4>
                        <p class="text-gray-600">确保所有资源使用相对路径或绝对URL，避免本地文件引用。</p>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-12">
        <div class="container mx-auto px-6 max-w-5xl">
            <div class="flex flex-col items-center">
                <h3 class="text-xl font-bold mb-4">技术小馆</h3>
                <a href="http://www.yuque.com/jtostring" class="footer-link text-gray-400 hover:text-white">http://www.yuque.com/jtostring</a>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>